<template>
  <div class="about">
    <div class="banner"><img src="../../../static/images/about.jpg"></div>
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="aboutDes">
        <el-tab-pane label="Who we are" name="first">
          <h2>Who we are</h2>
          <p>
          Kefid Machinery is a leading and pioneering enterprise with the most advanced international level in R&amp;D, manufacturing and selling of large-scale crushing &amp; screening plants and beneficiation plants.
          </p>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item,index) in whoImg" :key="index">
              <div class="grid-content">
                <img :src='"../../../static/images/" + item' class="img-res">
              </div>
            </el-col>
          </el-row>
          <div class="groy">
            <p>
            All of our equipment have got ISO international quality system certification, European Union CE certification and Russian GOST certification.
            </p>
            <p>
              Located in a historic city and transportation hub in central China-Zhengzhou, covering 140 thousand square meters, Kefid has Shangjie and High-tech zone two production bases. Shangjie Zone which covers 80,000 square meters has three heavy-duty and modern integrated assembling workshops-- occupying 50,000 square meters; High-tech zone has 22 floors R&D Management laboratory building with 26,000 square meters, comprehensive equipments exhibition hall with 5,100 square meters, heavy-duty and modern integrated assembling workshop with 10,000 square meters, and also has the industry's most advanced machining workshop 20,000 square meters, and hundred sets of advanced large-scale vertical lathe, fixed lathe, planner, boring lathe, grinder and milling machines.
            </p>
            <p>
              As China's largest crushing plant,mill equipments and beneficiation plants production base, kefid has exported large quantities and high-end mobile crushing plant and milling equipments to Russia, Kazakhstan, Indonesia, Ecuador, South Africa, Nigeria, Turkey more than 100 countries and regions and have solved about thousands of and beneficiation projects all over the world, which has made tremendous contributions to the local construction, mining industry and developments.
            </p>
            <p>
              We are always insisting on international advanced technical cooperation and communication, and introduce advanced technology from Germany, Swedish, Finland, and make digestion and absorption to improve our products' quality continuously. We keep the service idea of "win-win cooperation and create more value to customers", with the times, persist in innovation to provide the high quality products, global service and advanced technology support for our customers.
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Technology" name="second">
          <h2>Technology</h2>
          <p>
            Kefid persists in implementing the strategy of improving the competition ability of our products,relying on strong R&amp;D team, keeping forging ahead in an innovative way, aiming at the forefront of technology, and constantly updating the HI-TECH innovation capability of the corporation.
          </p>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item,index) in Technology" :key="index">
              <div class="grid-content">
                <img :src='"../../../static/images/" + item' class="img-res">
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="Workshop" name="third">
          <h2>Workshop</h2>
          <p>
            Combining with the domestic and foreign market demand and the development trend, Kefid introduces the advanced international technology, adapting and applying to products manufacturing. We've gotten ISO 9001:2000 quality certificates and four national patent certificates, and there are three patents have been reported to national IPO.
          </p>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item,index) in Workshop" :key="index">
              <div class="grid-content">
                <img :src='"../../../static/images/" + item' class="img-res">
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="Certificates" name="fourth">
          <h2>Certificates</h2>
          <p>
            Combining with the domestic and foreign market demand and the development trend, Kefid introduces the advanced international technology, adapting and applying to products manufacturing. We've gotten ISO 9001:2000 quality certificates and four national patent certificates, and there are three patents have been reported to national IPO.
          </p>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item,index) in certificate" :key="index">
              <div class="grid-content" @click="imgDsia(item)">
                <img :src='"../../../static/images/" + item' class="img-res">
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'first',
      whoImg: [
        'about-01.jpg',
        'about-02.jpg',
        'about-03.jpg',
        'about-04.jpg',
        'about-05.jpg',
        'about-06.jpg'
      ],
      Technology: [
        'tech-01.jpg',
        'tech-02.jpg',
        'tech-03.jpg',
        'tech-04.jpg',
        'tech-05.jpg',
        'tech-06.jpg',
        'tech-07.jpg',
        'tech-08.jpg',
        'tech-09.jpg'
      ],
      Workshop: [
        'workshop-01.jpg',
        'workshop-02.jpg',
        'workshop-03.jpg',
        'workshop-04.jpg',
        'workshop-05.jpg',
        'workshop-06.jpg',
        'workshop-07.jpg',
        'workshop-08.jpg',
        'workshop-09.jpg'
      ],
      certificate: [
        'certificate-1.jpg',
        'certificate-2.jpg',
        'certificate-3.jpg',
        'certificate-4.jpg',
        'certificate-5.jpg',
        'certificate-6.jpg',
        'certificate-7.jpg',
        'certificate-8.jpg'
      ]
    }
  },
  mounted () {

  },
  methods: {
    handleClick (tab, event) {
      console.log(2)
    },
    imgDsia (item) {
      const imgD = '../../../static/images/' + item
      this.$alert('<img src="' + imgD + '" class="img-res">', {
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>
<style scoped lang="css">
.about{
  padding-top: 52px;
}
.about .container{
  border-top: 10px solid #f6f6f8;
}
.aboutDes h2{
  text-align: center;
}
.aboutDes P{
  font-size: 1.4rem;
  text-align: justify;
}
.aboutDes .el-col-12{
  margin-bottom: 1rem;
}
.aboutDes .el-col-12 img{
  display: block;
}
</style>
<style>
.el-tabs__item.is-active{
  color: #db3f28 !important;
}
.el-tabs__active-bar{
  background-color: #db3f28 !important;
}
.el-tabs__header{
  margin-bottom: 0;
}
.el-message-box{
  width: auto;
}
.el-message-box__wrapper{
  width: 100%;
  position: fixed;
  top: 10%;
  left: 0;
  text-align: left;
  padding: 2rem;
}
.el-message-box__wrapper button.el-button--default{
  display: none;
}
.el-message-box__wrapper .el-message-box__headerbtn{
  font-size: 2.8rem;
  top: 6px;
}
.el-icon-arrow-left,.el-icon-arrow-right{
  color: #db3f28;
  font-size: 1.8rem;
}
</style>
